<template>
  <div style="height: 100%">
    <el-row style="height: 100%; background: #1aa094">
      <el-col :lg="16" :md="12" class="col_left">
        <h1>Vue3商城管理系统</h1>
        <span>技术支持</span>
      </el-col>
      <el-col :lg="8" :md="12" class="col_right">
        <h1>登录</h1>
        <el-form
          class="login-form"
          :model="ruleFormLogin"
          :rules="rulesLogin"
          ref="refRuleFormLogin"
        >
          <el-form-item prop="username">
            <el-input
              placeholder="请输入用户名"
              v-model="ruleFormLogin.username"
            >
              <template #prefix>
                <el-icon>
                  <avatar />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" v-model="ruleFormLogin.password">
              <template #prefix>
                <el-icon>
                  <lock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="handleOk" :loading="isLoading"
          >登录</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>


<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex'
import { Lock, Avatar } from "@element-plus/icons";
import { loginApi } from "@/api/login";
import { ElMessage } from "element-plus";
const router = useRouter();
const store = useStore()
const refRuleFormLogin = ref(null);
const isLoading = ref(false);
const ruleFormLogin = reactive({
  username: "",
  password: "",
});
const rulesLogin = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" },
  ],
};
const handleOk = () => {
  refRuleFormLogin.value.validate(async (valid) => {
    console.log("valid===", valid);
    try {
      if (valid) {
        isLoading.value = true;
        const res = await loginApi({
          username: ruleFormLogin.username,
          password: ruleFormLogin.password,
        });
        if (res.msg && res.msg !== "ok") {
          ElMessage.error(res.msg);
          return;
        }
        // 使用本地存储
        window.sessionStorage.setItem("token", res.data.token);
        // const res2 = await getUserInfoApi();
        // if (res2.msg && res.msg !== "ok") {
        //   ElMessage.error(res.msg);
        //   return;
        // }
        // store.commit('SET_USERINFO', res2.data)
        router.push("/");
      }
    } catch (err) {
      console.log(err);
    } finally {
      isLoading.value = false
    }
  });
};
</script>

<style lang='less' scoped>
.col_left {
  color: #fff;
  display: flex;
  // 垂直居中
  align-items: center;
  //水平居中
  justify-content: center;
  //flex方向修改成垂直方向
  flex-direction: column;
}

.col_right {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .login-form {
    width: 240px;
  }
}

.el-button {
  width: 240px;
  background: #1aa094;
}
</style>
